<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务领域分析看板</title>
    <!-- 引入外部资源 -->
    <script src="../public/js/tailwindcss3.4.16"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style>
    /* 折叠时隐藏侧边栏文字，仅显示图标 */
    .sidebar-collapsed span,
    .sidebar-collapsed .text-xs,
    .sidebar-collapsed .font-semibold,
    .sidebar-collapsed h1 {
        display: none !important;
    }
    .sidebar-collapsed nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 图例样式 */
    .legend-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
    }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <!-- 侧边栏折叠/展开按钮 -->
            <button id="toggleSidebar" class="mr-2 text-primary text-2xl focus:outline-none">
                <i class="fa fa-bars"></i>
            </button>
            <h1 class="text-xl font-bold text-primary">业务领域分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索指标..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside id="sidebar" class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析维度</div>

            <a href="#core-indicators" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>核心指标</span>
            </a>

            <a href="#revenue-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-money-bill text-lg w-5 text-center"></i>
                <span>收入分析</span>
            </a>

            <a href="#cost-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>成本分析</span>
            </a>

            <a href="#profit-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-trophy text-lg w-5 text-center"></i>
                <span>利润分析</span>
            </a>

            <a href="#comprehensive-analysis" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>综合分析</span>
            </a>

            <a href="#detail-table" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-table text-lg w-5 text-center"></i>
                <span>明细表</span>
            </a>

            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析看板</div>
            
            <a href="../客户分析看板html5/customer.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>1.客户</span>
            </a>
            <a href="../供应商分析看板html5/supplier.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>2.供应商</span>
            </a>
            <a href="../物资分析看板html5/materials.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>3.物资</span>
            </a>
            <a href="../产品分析看板html5/product.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cube text-lg w-5 text-center"></i>
                <span>4.产品</span>
            </a>
            <a href="../人员分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-user-friends text-lg w-5 text-center"></i>
                <span>5.人员</span>
            </a>
            <a href="../业务领域分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>6.业务领域</span>
            </a>
            <a href="../型号项目成本分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>7.型号项目成本</span>
            </a>
            <a href="../财务指标分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>8.财务指标</span>
            </a>
            <a href="../固定资产投资效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>9.固定资产投资效果</span>
            </a>
            <a href="../研发创新效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>10.研发创新效果</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main id="mainContent" class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间周期:</span>
                        <select id="timePeriod" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="2023" selected>2023年</option>
                            <option value="2022">2022年</option>
                            <option value="2021">2021年</option>
                            <option value="2020">2020年</option>
                            <option value="2019">2019年</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">业务领域:</span>
                        <select id="businessField" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部领域</option>
                            <option value="horizontal">横向</option>
                            <option value="vertical">纵向</option>
                            <option value="research">预研</option>
                            <option value="civilian">民品</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">客户类型:</span>
                        <select id="customerType" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部客户</option>
                            <option value="large">大客户</option>
                            <option value="medium">中小客户</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">产品类别:</span>
                        <select id="productCategory" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部产品</option>
                            <option value="product1">产品类别1</option>
                            <option value="product2">产品类别2</option>
                            <option value="product3">产品类别3</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 一级驾驶舱 - 核心指标 -->
        <section id="core-indicators" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">核心指标</h2>
                <div class="text-sm text-gray-500">实时监控业务领域关键指标</div>
            </div>

            <!-- 核心指标卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('totalRevenue')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">总收入金额</h3>
                        <i class="fa fa-money text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥3,600万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +8%</span>
                        <span class="text-success">环比 +3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('totalCost')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">总成本金额</h3>
                        <i class="fa fa-calculator text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">¥2,800万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-danger">同比 +5%</span>
                        <span class="text-danger">环比 +2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('totalProfit')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">总利润金额</h3>
                        <i class="fa fa-trophy text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">¥800万元</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +15%</span>
                        <span class="text-success">环比 +8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('profitMargin')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">整体利润率</h3>
                        <i class="fa fa-percentage text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">22.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +6%</span>
                        <span class="text-success">环比 +4%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('businessFields')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">业务领域数量</h3>
                        <i class="fa fa-sitemap text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">4个</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-info">横向、纵向</span>
                        <span class="text-info">预研、民品</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 收入分析 -->
        <section id="revenue-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">收入分析</h2>
                <div class="text-sm text-gray-500">各业务领域收入结构与趋势分析</div>
            </div>

            <!-- 收入分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 各业务领域收入对比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">各业务领域收入对比</h3>
                        <button onclick="showDetail('revenueComparison')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="revenueComparisonChart"></canvas>
                    </div>
                </div>

                <!-- 收入时间趋势 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">收入时间趋势</h3>
                        <button onclick="showDetail('revenueTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="revenueTrendChart"></canvas>
                    </div>
                </div>

                <!-- 客户类型收入分布 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">客户类型收入分布</h3>
                        <button onclick="showDetail('customerRevenue')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="customerRevenueChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="customerRevenueLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 产品类别收入占比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">产品类别收入占比</h3>
                        <button onclick="showDetail('productRevenue')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="productRevenueChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="productRevenueLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 成本分析 -->
        <section id="cost-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">成本分析</h2>
                <div class="text-sm text-gray-500">各业务领域成本结构与趋势分析</div>
            </div>

            <!-- 成本分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 各业务领域总成本对比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">各业务领域总成本对比</h3>
                        <button onclick="showDetail('costComparison')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="costComparisonChart"></canvas>
                    </div>
                </div>

                <!-- 成本结构分析 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">成本结构分析</h3>
                        <button onclick="showDetail('costStructure')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="costStructureChart"></canvas>
                    </div>
                </div>

                <!-- 直接成本与间接成本占比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">直接成本与间接成本占比</h3>
                        <button onclick="showDetail('costTypeRatio')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="costTypeRatioChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="costTypeRatioLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 成本时间趋势 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">成本时间趋势</h3>
                        <button onclick="showDetail('costTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="costTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 利润分析 -->
        <section id="profit-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">利润分析</h2>
                <div class="text-sm text-gray-500">各业务领域盈利能力与贡献分析</div>
            </div>

            <!-- 利润分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 各业务领域利润对比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">各业务领域利润对比</h3>
                        <button onclick="showDetail('profitComparison')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="profitComparisonChart"></canvas>
                    </div>
                </div>

                <!-- 利润贡献率分布 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">利润贡献率分布</h3>
                        <button onclick="showDetail('profitContribution')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="profitContributionChart"></canvas>
                        </div>
                        <div class="flex flex-col justify-center">
                            <div class="space-y-3" id="profitContributionLegend">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 各业务领域利润率对比 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">各业务领域利润率对比</h3>
                        <button onclick="showDetail('profitMarginComparison')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="profitMarginComparisonChart"></canvas>
                    </div>
                </div>

                <!-- 利润时间趋势 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">利润时间趋势</h3>
                        <button onclick="showDetail('profitTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="profitTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 综合分析 -->
        <section id="comprehensive-analysis" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">综合分析</h2>
                <div class="text-sm text-gray-500">业务协同与成本优化分析</div>
            </div>

            <!-- 综合分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 业务协同分析 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">业务协同分析</h3>
                        <button onclick="showDetail('businessSynergy')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="businessSynergyChart"></canvas>
                    </div>
                </div>

                <!-- 成本优化分析 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">成本优化分析</h3>
                        <button onclick="showDetail('costOptimization')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="costOptimizationChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 明细表 -->
        <section id="detail-table" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">明细表</h2>
                <div class="text-sm text-gray-500">业务领域数据明细</div>
            </div>

            <!-- 明细表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <!-- 业务领域明细表 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">业务领域明细表</h3>
                        <button onclick="showDetail('businessDetailTable')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-3 px-4 font-semibold text-gray-700">业务领域</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">收入(万元)</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">成本(万元)</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">利润(万元)</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">利润率(%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">横向</td>
                                    <td class="py-3 px-4 text-right">1,000</td>
                                    <td class="py-3 px-4 text-right">800</td>
                                    <td class="py-3 px-4 text-right">200</td>
                                    <td class="py-3 px-4 text-right">20%</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">纵向</td>
                                    <td class="py-3 px-4 text-right">1,200</td>
                                    <td class="py-3 px-4 text-right">900</td>
                                    <td class="py-3 px-4 text-right">300</td>
                                    <td class="py-3 px-4 text-right">25%</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">预研</td>
                                    <td class="py-3 px-4 text-right">600</td>
                                    <td class="py-3 px-4 text-right">500</td>
                                    <td class="py-3 px-4 text-right">100</td>
                                    <td class="py-3 px-4 text-right">16.7%</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">民品</td>
                                    <td class="py-3 px-4 text-right">800</td>
                                    <td class="py-3 px-4 text-right">600</td>
                                    <td class="py-3 px-4 text-right">200</td>
                                    <td class="py-3 px-4 text-right">25%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 成本构成明细表 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">成本构成明细表</h3>
                        <button onclick="showDetail('costDetailTable')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-3 px-4 font-semibold text-gray-700">成本类型</th>
                                    <th class="text-left py-3 px-4 font-semibold text-gray-700">成本项目</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">金额(万元)</th>
                                    <th class="text-right py-3 px-4 font-semibold text-gray-700">占比(%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">直接成本</td>
                                    <td class="py-3 px-4">材料费</td>
                                    <td class="py-3 px-4 text-right">1,120</td>
                                    <td class="py-3 px-4 text-right">40%</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">直接成本</td>
                                    <td class="py-3 px-4">外协费</td>
                                    <td class="py-3 px-4 text-right">560</td>
                                    <td class="py-3 px-4 text-right">20%</td>
                                </tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50">
                                    <td class="py-3 px-4">间接成本</td>
                                    <td class="py-3 px-4">管理费</td>
                                    <td class="py-3 px-4 text-right">420</td>
                                    <td class="py-3 px-4 text-right">15%</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-3 px-4">间接成本</td>
                                    <td class="py-3 px-4">工资费</td>
                                    <td class="py-3 px-4 text-right">700</td>
                                    <td class="py-3 px-4 text-right">25%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">详细分析</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="index.js"></script>
</body>
</html> 